<template>
  <div>
    <div class="color-info pdz10" v-if="disabled && !fileList.length">
      暂无数据
    </div>
    <el-upload
      v-else
      v-bind="$attrs"
      v-on="$listeners"
      class="upload-demo"
      :class="{ buttonDisabled: disabled }"
      :httpRequest="uploadFile"
      action="/"
      multiple
      :file-list="fileList"
      :before-remove="beforeRemove"
      :before-upload="breforeUpload"
      :on-remove="removeFile"
      :on-preview="handlePictureCardPreview"
      :disabled="disabled"
      :list-type="listType"
      ref="elupload"
      :accept="acceptValue"
    >
      <!-- <div slot="file" slot-scope="{ file }">
        <img
          class="el-upload-list__item-thumbnail pointer"
          @click="handlePictureCardPreview(file)"
          :src="file.url"
          alt=""
        />
        <i class="el-icon-close " @click="removeFile(file)"></i>
        <span class="el-upload-list__item-actions">
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <i class="el-icon-download"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
          </span>
        </span>
      </div> -->
      <i class="el-icon-plus"></i>
      <!-- <el-button size="small" type="primary" :loading="loading">{{
        loading ? "上传中" : "点击上传"
      }}</el-button> -->
    </el-upload>
    <el-dialog
      :visible.sync="dialogVisible"
      title="查看"
      v-dialogDrag
      width="60%"
      :append-to-body="true"
      custom-class="widget-dialog widget-form widget-search center no-margin color-white black-bg2"
    >
      <div class="text-center ">
        <img width="50%" :src="dialogImageUrl" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { uploadFileUploadFile as uploadApi } from "@/api";
import {
  fileTypeValidate,
  acceptValue,
  isImg
} from "@/utils/fileTypeValidation";
import baseUrl from "@/api/request/url";
import { futUrl } from "@/api/outerApi";
import * as staticView from "@/router/staticView";
import { is } from "@babel/types";
export default {
  name: "FormListImageFile",
  props: {
    value: {
      type: Array,
      default: []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ""
    },
    listType: {
      type: String,
      default: "picture-card"
    }
  },
  data() {
    return {
      acceptValue,
      isImg,
      msg: "",
      loading: false,
      failed: false,
      dialogVisible: false,
      dialogImageUrl: "",
      pathUrl: baseUrl
    };
  },
  mounted() {
    if (!(window.parent.frames[0] != window.self)) {
      this.pathUrl = futUrl;
    } else {
      this.pathUrl = baseUrl;
    }
  },
  computed: {
    fileList() {
      return this.files.map(item => {
        return {
          url: this.pathUrl + item
        };
      });
    },
    files: {
      get() {
        return this.value.map(item => {
          return item;
        });
      },
      set(e) {
        this.$emit("input", e);
      }
    },
    tips() {
      if (!this.value) {
        return true;
      }
      return false;
    }
  },
  methods: {
    setValue(e) {
      return e.map();
    },
    showTips(e) {
      e.preventDefault();
      //
    },
    getFile(e) {
      let otherWindow = window.open();
      otherWindow.opener = null;
      window.open(e.url);
    },
    async uploadFile(e) {
      //   this.files = [...this.files];
      const type = fileTypeValidate(e.file.name);
      this.loading = true;
      const formData = new FormData();
      formData.append("files", e.file);
      //   formData.append("type", type);
      try {
        let res = await uploadApi(formData);
        this.files.push(res.data[0]);
      } catch (error) {
        this.$refs.elupload.tempIndex -= 1;
      }
      this.files = [...this.files];
      this.loading = false;
    },
    breforeUpload(file) {
      const type = isImg(file.name);
      if (!type || (this.type && type !== this.type)) {
        this.failed = true;
        this.$notified.error({
          message: "上传失败，不支持的文件类型"
        });
      }
      return Boolean(type);
    },
    beforeRemove(file, fileList) {
      if (this.failed) {
        this.failed = false;
        return;
      }
      return this.$confirm(`确定移除 ？`);
    },
    removeFile(e) {
      this.files = this.files.filter(i => {
        return e.url.indexOf(i) == -1;
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>

<style scoped lang="scss">
.buttonDisabled {
  &::v-deep {
    & > div {
      //   display: none;
      cursor: no-drop;
    }
  }
}
</style>
